<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <base th:href="@{/}" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/theme.css">
    <link rel="stylesheet" href="css/pagination.css"/>
    <style>
        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }
        #topcontrol {
            color: #fff;
            z-index: 99;
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: #222;
            position: relative;
            right: 14px !important;
            bottom: 11px !important;
            border-radius: 3px !important;
        }

        #topcontrol:after {
            /*top: -2px;*/
            left: 8.5px;
            content: "\f106";
            position: absolute;
            text-align: center;
            font-family: FontAwesome;
        }

        #topcontrol:hover {
            color: #fff;
            background: #18ba9b;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }
        .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
            border-bottom-color: #ddd;
        }
        .nav-tabs>li>a {
            border-radius: 0;
        }
    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#" style="font-size:32px;">尚筹网-创意产品众筹平台</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse" style="float:right;">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i><a data-no-instant="" sec:authentication="name"></a> <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="/auth/to/member/center/page.html"><i class="glyphicon glyphicon-scale"></i> 会员中心</a></li>
                                <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                                <li class="divider"></li>
                                <li><a href="index.html" th:href="@{/auth/do/member/logout.html}"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<div class="container theme-showcase" role="main">

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li>
                                <a rel="nofollow" href="index.html"><i class="glyphicon glyphicon-home"></i> 众筹首页</a>
                            </li>
                            <li >
                                <a rel="nofollow" href="projects.html"><i class="glyphicon glyphicon-th-large"></i> 众筹项目</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="start.html"><i class="glyphicon glyphicon-edit"></i> 发起众筹</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="minecrowdfunding.html"><i class="glyphicon glyphicon-user"></i> 我的众筹</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="jumbotron nofollow" style="    padding-top: 10px;">
                    <h3 th:text="${detailProjectVO.projectName}">
                        酷驰触控龙头，智享厨房黑科技
                    </h3>
                    <div style="float:left;width:70%;" th:text="${detailProjectVO.projectDesc}">
                        智能时代，酷驰触控厨房龙头，让煮妇解放双手，触发更多烹饪灵感，让美味信手拈来。
                    </div>
                    <div style="float:right;">
                        <button type="button" class="btn btn-default"><i style="color:#f60" class="glyphicon glyphicon-heart"></i> 关注 [[${detailProjectVO.followerCount}]]</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="row clearfix">
                    <div class="col-md-8 column">
                        <img alt="140x140" width="740" th:src="@{/upload/imgs/}+${detailProjectVO.headerPicturePath}" src="img/product_detail_head.jpg" />
                        <img alt="140x140" th:each="detailPicturePath : ${detailProjectVO.detailPicturePathList}" width="740" th:src="@{/upload/imgs/}+${detailPicturePath}" src="img/product_detail_body.jpg" />

                    </div>



                    <div class="col-md-4 column">
                        <div class="panel panel-default" style="border-radius: 0px;">
                            <div class="panel-heading" style="background-color: #fff;border-color: #fff;">
                                <span class="label label-success"><i class="glyphicon glyphicon-tag"></i> [[${detailProjectVO.statusText}]]</span>
                            </div>
                            <div class="panel-body">
                                <h3 >
                                    已筹资金：￥[[${detailProjectVO.supportMoney}]]
                                </h3>
                                <p><span>目标金额 ：[[${detailProjectVO.money}]]</span><span style="float:right;">达成 ： [[${detailProjectVO.percentage}]]%</span></p>
                                <div class="progress" style="height:10px; margin-bottom: 5px;">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" th:aria-valuenow="${detailProjectVO.percentage}" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" th:style="'width:' + ${detailProjectVO.percentage} + '%'"></div>
                                </div>
                                <p>剩余 [[${detailProjectVO.lastDay}]] 天</p>
                                <div>
                                    <p><span>已有[[${detailProjectVO.supporterCount}]]人支持该项目</span></p>
<!--                                    <button type="button" class="btn  btn-warning btn-lg btn-block" data-toggle="modal" data-target="#myModal">立即支持</button>-->
                                </div>
                            </div>
                            <div class="panel-footer" style="    background-color: #fff;
                                    border-top: 1px solid #ddd;
                                    border-bottom-right-radius: 0px;
                                    border-bottom-left-radius: 0px;">
                                <div class="container-fluid">
                                    <div class="row clearfix">
                                        <div class="col-md-3 column" style="padding:0;">
                                            <img alt="140x140" src="img/services-box2.jpg" data-holder-rendered="true" style="width: 80px; height: 80px;">
                                        </div>
                                        <div class="col-md-9 column">
                                            <div class="">
                                                <div id="comments" >
                                                    <div th:if="${ProjectComment}!=null">
                            <span class="response">
                                <form name="logoutform" th:action="@{/logout}" method="post"></form>
                                <th:block sec:authorize="isAuthenticated()">
                                    Hello，<a data-no-instant="" sec:authentication="name"></a>
                                    <!--                                    如果你想 <a href="javascript:document.logoutform.submit();">注销</a> ?-->
                                </th:block>
                                <th:block sec:authorize="isAnonymous()">
                                    用户想要评论，请先<a th:href="@{/login}" title="登录" data-no-instant="">登录</a>!
                                </th:block>
                            </span>
                                                        <div sec:authorize="isAuthenticated()">
                                                            <form id="comment-form" class="comment-form" role="form" onsubmit="return TaleComment.subComment();">
                                                                <input type="hidden" name="aid" id="aid" th:value="${detailProjectVO.projectId}"/>
                                                                <!--                                    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>-->
                                                                <textarea name="text" id="textarea" class="form-control" placeholder="以上信息可以为空,评论不能为空哦!"
                                                                          required="required" minlength="5" maxlength="2000"></textarea>
                                                                <button type="submit" class="submit" id="misubmit">提交</button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <!-- 分页显示其他评论内容 -->
                                                    <div th:if="${ProjectComment }!=null">
                                                        <ol class="comment-list">
                                                            <th:block th:each="comment :${ProjectComment.list}">
                                                                <li th:id="'li-comment-'+${comment.id}" class="comment-body comment-parent comment-odd">
                                                                    <div th:id="'comment-'+${comment.id}">
                                                                        <div class="comment-view" onclick="">
                                                                            <div class="comment-content">
                                                                                <span class="comment-author-at"></span>
                                                                                <p th:utext="${comment.projectComment}"></p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </th:block>
                                                        </ol>
                                                        <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                                                        <!-- 进行评论分页 -->

                                                    </div>
                                                </div>
<!--                                                <h4>-->
<!--                                                    <b>福建省南安厨卫</b> <span style="float:right;font-size:12px;" class="label label-success">已认证</span>-->
<!--                                                </h4>-->
<!--                                                <p style="font-size:12px">-->
<!--                                                    酷驰是一家年轻的厨卫科技公司，我们有一支朝气蓬勃，有激情、有想法、敢实践的团队。-->

<!--                                                </p>-->
<!--                                                <p style="font-size:12px">-->
<!--                                                    客服电话:0595-86218855-->
<!--                                                </p>-->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div th:if="${#strings.isEmpty(detailProjectVO.detailReturnVOList)}">未找到回报数据</div>
                        <div th:if="${not #strings.isEmpty(detailProjectVO.detailReturnVOList)}">
                            <div th:each="return : ${detailProjectVO.detailReturnVOList}" class="panel panel-default" style="border-radius: 0px;">
                                <div class="panel-heading">
                                    <h3 >
                                        ￥[[${return.supportMoney}]]
                                        <span th:if="${return.signalPurchase} == 0" style="float:right;font-size:12px;">无限额，447位支持者</span>
                                        <span th:if="${return.signalPurchase} == 1" style="float:right;font-size:12px;">限额[[${return.purchase}]]，447位支持者</span>
                                    </h3>
                                </div>
                                <div class="panel-body">
                                    <p th:if="${return.freight} == 0">配送费用：包邮</p>
                                    <p th:if="${return.freight} > 0">配送费用：[[${return.freight}]]</p>
                                    <p>预计发放时间：项目筹款成功后的[[${return.returnDate}]]天内</p>
                                    <a class="btn btn-warning btn-lg" th:href="'/confirm/return/info/' + ${return.returnId}">
                                        支持
                                    </a>
                                    <br><br>
                                    <p th:text="${return.content}">感谢您的支持，在众筹开始后，您将以79元的优惠价格获得“遇见彩虹?”智能插座一件（参考价208元）。</p>
                                </div>
                            </div>
                        </div>
                        <div class=" panel panel-default" style="border-radius: 0px;">
                            <div class="panel-heading">
                                <h3 >
                                    风险提示
                                </h3>
                            </div>
                            <div class="panel-body">
                                <p>1.众筹并非商品交易，存在一定风险。支持者根据自己的判断选择、支持众筹项目，与发起人共同实现梦想并获得发起人承诺的回报。<br>
                                    2.众筹平台仅提供平台网络空间及技术支持等中介服务，众筹仅存在于发起人和支持者之间，使用众筹平台产生的法律后果由发起人与支持者自行承担。<br>
                                    3.本项目必须在2017-06-09之前达到￥10000.00 的目标才算成功，否则已经支持的订单将取消。订单取消或募集失败的，您支持的金额将原支付路径退回。<br>
                                    4.请在支持项目后15分钟内付款，否则您的支持请求会被自动关闭。<br>
                                    5.众筹成功后由发起人统一进行发货，售后服务由发起人统一提供；如果发生发起人无法发放回报、延迟发放回报、不提供回报后续服务等情况，您需要直接和发起人协商解决。<br>
                                    6.如您不同意上述风险提示内容，您有权选择不支持；一旦选择支持，视为您已确认并同意以上提示内容。</p>
                            </div>
                        </div>

                        <div><h2>为你推荐</h2><hr></div>
                        <div class="prjtip panel panel-default" style="border-radius: 0px;">
                            <div class="panel-body">
                                <img src="img/product-3.png" width="100%" height="100%">
                            </div>
                        </div>

                        <div class="prjtip panel panel-default" style="border-radius: 0px;">
                            <div class="panel-body">
                                <img src="img/product-4.jpg" width="100%" height="100%">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="container" style="margin-top:20px;">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div id="footer">
                    <div class="footerNav">
                        <a rel="nofollow" href="http://www.atguigu.com">关于我们</a> | <a rel="nofollow" href="http://www.atguigu.com">服务条款</a> | <a rel="nofollow" href="http://www.atguigu.com">免责声明</a> | <a rel="nofollow" href="http://www.atguigu.com">网站地图</a> | <a rel="nofollow" href="http://www.atguigu.com">联系我们</a>
                    </div>
                    <div class="copyRight">
                        Copyright ?2010-2014atguigu.com 版权所有
                    </div>
                </div>

            </div>
        </div>
    </div>

</div> <!-- /container -->


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <div class="modal-dialog "  style="width:960px;height:400px;" role="document">
        <div class="modal-content" data-spy="scroll" data-target="#myScrollspy">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">选择支持项</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row clearfix">
                        <div class="col-sm-3 col-md-3 column" id="myScrollspy">
                            <ul class="nav nav-tabs nav-stacked">
                                <li class="active"><a href="#section-1">￥1.00</a></li>
                                <li class="active"><a href="#section-2">￥149.00</a></li>
                                <li class="active"><a href="#section-3">￥249.00</a></li>
                                <li class="active"><a href="#section-4">￥549.00</a></li>
                                <li class="active"><a href="#section-5">￥1999.00</a></li>
                            </ul>
                        </div>
                        <div id="navList" class="col-sm-9 col-md-9 column" style="height:400px;overflow-y:auto;">
                            <h2 id="section-1" style="border-bottom:1px dashed #ddd;" ><span style="font-size:20px;font-weight:bold;">￥1.00</span><span style="font-size:12px;margin-left:60px;">无限额，223位支持者</span></h2>
                            <p>配送费用：全国包邮</p>
                            <p>预计发放时间：项目筹款成功后的30天内</p>
                            <button type="button" class="btn  btn-warning btn-lg " onclick="window.location.href='pay-step-1.html'">支持</button>
                            <br><br>
                            <p>每满1750人抽取一台活性富氢净水直饮机，至少抽取一台。抽取名额（小数点后一位四舍五入）=参与人数÷1750人，由苏宁官方抽取。</p>
                            <hr>
                            <h2 id="section-2" style="border-bottom:1px dashed #ddd;" ><span style="font-size:20px;font-weight:bold;">￥149.00</span><span style="font-size:12px;margin-left:60px;">无限额，223位支持者</span></h2>
                            <p>配送费用：全国包邮</p>
                            <p>预计发放时间：项目筹款成功后的30天内</p>
                            <button type="button" class="btn  btn-warning btn-lg " onclick="window.location.href='pay-step-1.html'">支持</button>
                            <br><br>
                            <p>每满1750人抽取一台活性富氢净水直饮机，至少抽取一台。抽取名额（小数点后一位四舍五入）=参与人数÷1750人，由苏宁官方抽取。</p>
                            <hr>
                            <h2 id="section-3" style="border-bottom:1px dashed #ddd;" ><span style="font-size:20px;font-weight:bold;">￥249.00</span><span style="font-size:12px;margin-left:60px;">无限额，223位支持者</span></h2>
                            <p>配送费用：全国包邮</p>
                            <p>预计发放时间：项目筹款成功后的30天内</p>
                            <button type="button" class="btn  btn-warning btn-lg " onclick="window.location.href='pay-step-1.html'">支持</button>
                            <br><br>
                            <p>每满1750人抽取一台活性富氢净水直饮机，至少抽取一台。抽取名额（小数点后一位四舍五入）=参与人数÷1750人，由苏宁官方抽取。</p>
                            <hr>
                            <h2 id="section-4" style="border-bottom:1px dashed #ddd;" ><span style="font-size:20px;font-weight:bold;">￥549.00</span><span style="font-size:12px;margin-left:60px;">无限额，223位支持者</span></h2>
                            <p>配送费用：全国包邮</p>
                            <p>预计发放时间：项目筹款成功后的30天内</p>
                            <button type="button" class="btn  btn-warning btn-lg " onclick="window.location.href='pay-step-1.html'">支持</button>
                            <br><br>
                            <p>每满1750人抽取一台活性富氢净水直饮机，至少抽取一台。抽取名额（小数点后一位四舍五入）=参与人数÷1750人，由苏宁官方抽取。</p>
                            <hr>
                            <h2 id="section-5" style="border-bottom:1px dashed #ddd;" ><span style="font-size:20px;font-weight:bold;">￥1999.00</span><span style="font-size:12px;margin-left:60px;">无限额，223位支持者</span></h2>
                            <p>配送费用：全国包邮</p>
                            <p>预计发放时间：项目筹款成功后的30天内</p>
                            <button type="button" class="btn  btn-warning btn-lg " onclick="window.location.href='pay-step-1.html'">支持</button>
                            <br><br>
                            <p>每满1750人抽取一台活性富氢净水直饮机，至少抽取一台。抽取名额（小数点后一位四舍五入）=参与人数÷1750人，由苏宁官方抽取。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script src="script/back-to-top.js"></script>
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<script>
    $(".prjtip img").css("cursor", "pointer");
    $(".prjtip img").click(function(){
        window.location.href = 'project.html';
    });
</script>

<script type="text/javascript">
    $(function () {
        // 调用一个函数
        initPagination();
    });

    function initPagination(){
        // 获取分页数据中的总记录数
        var totalRecord = '[[${ProjectComment.total}]]';

        // 声明Pagination设置属性的JSON对象
        var properties = {
            num_edge_entries: 1,                                // 边缘页数
            num_display_entries: 5,                             // 主体页数
            callback: pageSelectCallback,                       // 点击各种翻页反扭时触发的回调函数（执行翻页操作）
            current_page: '[[${pageNum-1}]]',   // 当前页码
            prev_text: "上一页",                                 // 在对应上一页操作的按钮上显示的文本
            next_text: "下一页",                                 // 在对应下一页操作的按钮上显示的文本
            items_per_page: '[[${pageSize}]]'   // 每页显示的数量
        };
        // pagination()方法就是上面的js文件提供的，需要传入总记录数与上面的json对象
        $("#Pagination").pagination(totalRecord,properties);
    }

    // 回调函数的代码
    function pageSelectCallback(pageIndex, jQuery){
        // pageIndex是当前点击的页码的索引，索引从0开始计算，因此比pageNum小1
        var pageNum = pageIndex+1;
        var projectId ='[[${detailProjectVO.projectId}]]'

        // 执行页面跳转（带页码与关键字）
        window.location.href = "/show/project/detail/"+projectId+"/?pageNum="+pageNum;

        // 取消当前超链接的默认行为
        return false;
    }
    $('#misubmit').click(function (e) {
        var comment=$("[name=text]").val();
        $.ajax({
            'type': "post",
            'url': "[[@{/comments/publish.json}]]",
            'data': {"text": comment,
                    "aid":'[[${detailProjectVO.projectId}]]'},
            'async': false,
            'dataType': 'json',
            "success": function (response) {
                var result = response.result;
                if (result == "SUCCESS") {
                    alert("上传成功！");
                }

                if (result == "FAILED") {
                    alert(response.message);
                }

            }
        });
    });
    /*<![CDATA[*/
    // (function () {
    //     window.TaleComment = {
    //         subComment: function () {
    //             $.ajax({
    //                 type: 'post',
    //                 url: '/comments/publish',
    //                 data: $('#comment-form').serialize(),
    //                 async: false,
    //                 dataType: 'json',
    //                 success: function (result) {
    //                     if (result && result.success) {
    //                         window.alert("评论提交成功!");
    //                         window.location.reload();
    //                     } else {
    //                         window.alert("发送失败")
    //                         if (result.msg) {
    //                             alert(result.msg);
    //                         }
    //                     }
    //                 }
    //             });
    //             return false;
    //         }
    //     };
    // })();
</script>

</body>
</html>